<template>
  <div>
    <div class="header">
      <el-col :span="4" :push="1">
        <el-select v-model="stateId" value-key="stateId" @change="changeState()" style="margin-top: 10px;width:78%" filterable placeholder="请选择状态">
          <el-option v-for="s in scheduList" :key="s.stateId" :label="s.stateName" :value="s.stateId"></el-option>
        </el-select>
      </el-col>
      <el-col :span="6" :push="2">
        <el-input oninput="value=value.replace(/\s*/g, '')" placeholder="工单主题/流水号"
                  @change="searchPage()" style="margin-top: 10px;width: 100%" v-model="search" suffix-icon="el-icon-search"></el-input>
      </el-col>
      <el-col :span="2" :push="3">
        <el-button icon="el-icon-refresh" style="margin-top:10px" @click="reset">重置</el-button>
      </el-col>
      <el-col :span="3" :push="4">
        <router-link :to="{path:'/order'}">
          <el-button style="margin-top: 10px" icon="el-icon-circle-plus">新建维修工单</el-button>
        </router-link>
      </el-col>
      <el-col :span="4" :push="5">
        <el-popover
          placement="bottom"
          title="全部列名"
          width="100"
          trigger="manual"
          v-model="visible">
          <el-checkbox-group v-model="nameList">
            <el-checkbox v-for="item in selectList"
                         :disabled="item=='主题' || item=='对应客户' || item=='费用'"
                         :label="item"
                         :key="item"
                         style="display: block" ></el-checkbox>
          </el-checkbox-group>
          <span style="color: red;font-size: x-small">注：字段过多会出现水平滚动条</span>
          <el-button icon="el-icon-s-tools"  style="width:88px;margin-top: 10px" slot="reference"
                     @click="visible = !visible">设置</el-button>
        </el-popover>
      </el-col>
    </div>
    <el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading" ref="multipleTable" style="width: 100%" :default-sort = "{prop: 'details[0].tainsDate', order: 'ascending'}">
      <el-table-column prop="tainId" type="selection"></el-table-column>
      <el-table-column prop="tainOrder" width="130" label="主题" v-if="selectData[0].istrue">
        <template slot-scope="s">
          <span style="color:#009EFB;cursor:pointer" @click="look(s.row.tainId)">
            <i class="el-icon-s-promotion"></i>
            {{s.row.tainOrder}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="customerByCustomId.cusName" label="对应客户" v-if="selectData[4].istrue"></el-table-column>
      <el-table-column prop="tainState" label="状态" v-if="selectData[2].istrue">
        <template slot-scope="s">
          {{s.row.tainState | formatData}}
        </template>
      </el-table-column>
      <el-table-column prop="tainRece" label="接单人" v-if="selectData[3].istrue"></el-table-column>
      <el-table-column prop="details[0].tainsDate"
                       sortable width="120" label="接单时间" v-if="selectData[4].istrue">
        <template slot-scope="c">
          {{c.row.details[0].tainsDate | formatDate}}
        </template>
      </el-table-column>
      <el-table-column prop="details[0].tainsClass" label="分类" v-if="selectData[5].istrue"></el-table-column>
      <el-table-column prop="details[0].tainsPerson" label="联系人" v-if="selectData[6].istrue"></el-table-column>
      <el-table-column prop="details[0].tainsSection" label="承接部门" v-if="selectData[7].istrue"></el-table-column>
      <el-table-column prop="details[0].tainsRepair" label="是否在保" v-if="selectData[8].istrue">
        <template slot-scope="e">
          {{e.row.details[0].tainsRepair | formatState}}
        </template>
      </el-table-column>
      <el-table-column prop="details[0].schedu.stateName" width="120" label="维修工单进度" v-if="selectData[9].istrue"></el-table-column>
    </el-table>
    <el-row style="background-color: white">
      <div class="limit">
        <el-pagination
          :current-page.sync="currPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @current-change="changePage"
          @size-change="sizeChange">
        </el-pagination>
        <p></p>
      </div>
    </el-row>
    <el-row style="height: 500px;background-color:white">
      <el-row style="font-size: 12px;font-weight: 600;margin-top: 20px">
        <el-col :span="8" :push="1">
          <span><b>分布</b></span>
        </el-col>
        <el-col :span="8">
          <span style="margin-left: 20px"><b>Top</b></span>
        </el-col>
        <el-col :span="8">
          <span style="margin-left: 20px"><b>漏斗</b></span>
        </el-col>
      </el-row>
      <el-col :span="8">
        <!-- 饼状图 -->
        <div style="height:400px" ref="pieCharts"></div>
        <div>
          <el-select style="margin-left: 60px;width: 280px" v-model="pieSelect" value-key="pieSelect" @change="changePieChart">
            <el-option v-for=" p in pieChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
          </el-select>
        </div>
      </el-col>
      <!-- 柱状图 -->
      <el-col :span="8">
        <div style="height:400px" ref="barCharts"></div>
        <div>
          <el-select style="margin-left: 70px;width: 280px" v-model="barSelect" value-key="barSelect" @change="changeBarChart">
            <el-option v-for=" p in barChartOptions" :key="p.value" :label="p.label" :value="p.value"></el-option>
          </el-select>
        </div>
      </el-col>
      <!-- 漏斗 -->
      <el-col :span="8">
        <div class="border_width" ref="funnelCharts"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
    import TemplateVue from "./homepage/TemplateVue";
    export default {
      name: "AsMaintain",
      components: {TemplateVue},
      data: function () {
        return {
          loading: true,
          tableData: [],
          scheduList: [],
          repairMonthList: [],//饼状图数据
          deliveredList: [],//柱状图数量
          deliveredMonthList: [],//柱状图月份
          funnerList: [],   //漏斗数据
          stateId:'',      //下拉框
          search:'',       //按条件查询
          visible:false,   //动态列显隐
          pieSelect: 1,    //饼状图选择器
          barSelect: 1,    //柱状图选择器
          //分页
          currPage: 1,     //当前页
          totalSize: 0,    //总条数
          pageSize: 5,      //页大小
          nameList: [
            "主题",
            "对应客户","状态",
            "接单人","接单时间","分类",
            "联系人","承接部门","是否在保","维修工单进度"
          ],//列表默认全选
          selectList:[
            "主题",
            "对应客户","状态",
            "接单人","接单时间","分类",
            "联系人","承接部门","是否在保","维修工单进度"
          ],//列表数据
          selectData: [
            {title: "主题",istrue: true},
            {title: "对应客户",istrue: true},
            {title: "状态",istrue: true},
            {title: "接单人",istrue: true},
            {title: "接单时间",istrue: true},
            {title: "分类",istrue:true},
            {title: "联系人",istrue: true},
            {title: "承接部门",istrue: true},
            {title: "是否在保",istrue: true},
            {title: "维修工单进度",istrue: true}
          ],
          pieChartOptions:[{
            value: 1,
            label: '保修状况月度工单数分布'
          }, {
            value: 2,
            label: '维修产品月度工单客户分布'
          }],
          barChartOptions:[{
            value: 1,
            label: '月度工单数分布'
          }, {
            value: 2,
            label: '维修完成月度工单数分布'
          }, {
            value: 3,
            label: '维修未完成月度工单数分布'
          }]
        }
      },
      created:function(){
        this.initData(this.stateId,this.search,this.currPage,this.pageSize);

        this.$axios.get("http://localhost:8088/crm/check-schedu",
        ).then(v=>{
          this.scheduList = v.data;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })

        this.pieChartOne();
        this.barChartThree();
        this.funnelChartOne();
      },
      methods:{
        initData(stateId ,search, currPage, pageSize){
          this.$axios.get("http://localhost:8088/crm/main-page",
            {params:{stateId:stateId, search:search, currPage:currPage, pageSize:pageSize}}
          ).then(v=>{
            this.tableData = v.data.rows;
            this.totalSize = v.data.total;
            this.loading = false;
          }).catch(v=>{
            alert("访问失败!"+v.data);
          })
        },
        changePage(currPage){
          this.initData(this.stateId, this.search, currPage, this.pageSize);
        },
        changeState(){
          this.initData(this.stateId, this.search, this.currPage, this.pageSize);
        },
        sizeChange (pageSize) { //改变页大小
          this.pageSize = pageSize;
          this.initData(this.stateId, this.search, 1, pageSize);
        },
        searchPage(){
          this.initData(this.stateId,this.search,this.currPage,this.pageSize);
        },
        reset(){//重置
          this.stateId = '';
          this.search = '';
          this.initData(this.stateId, this.search, this.currPage, this.pageSize);
        },
        pieChartOne(){
          this.$axios.get("http://localhost:8088/crm/repair-month"
          ).then(v=>{//保修状况月度工单数分布
            this.repairMonthList = v.data;
          })
        },
        pieChartTwo(){
          this.$axios.get("http://localhost:8088/crm/money-month"
          ).then(v=>{//维修产品月度工单费用分布
            this.repairMonthList = v.data;
          })
        },
        changePieChart(){
          this.repairMonthList = [];
          if(this.pieSelect == 1){
            this.pieChartOne();
          }else if(this.pieSelect == 2){
            this.pieChartTwo();
          }
        },
        pieChart(){
          let myChart = this.$echarts.init(this.$refs.pieCharts);//显示
          myChart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            series: [{
              name: '分布',
              type: 'pie',
              radius: '62%',
              center: ['50%', '50%'],
              clockwise: false,
              data: this.repairMonthList,
              label: {
                normal: {
                  textStyle: {
                    color: '#999',
                    fontSize: 14,
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#ffffff',
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }],
            color: [
              '#00acee',
              '#52cdd5',
              '#79d9f1',
              '#a7e7ff',
              '#c8efff'
            ],
            backgroundColor: '#fff'
          })
        },
        barChartOne(){
          this.$axios.get("http://localhost:8088/crm/delivered-id"
          ).then(v=>{//已交付月度工单数分布
            this.deliveredList = v.data;
          })

          this.$axios.get("http://localhost:8088/crm/delivered-month"
          ).then(v=>{//已交付月度工单数分布的月份
            this.deliveredMonthList = v.data;
          })
        },
        barChartTwo(){
          this.$axios.get("http://localhost:8088/crm/undelivered-state"
          ).then(v=>{//已交付月度工单数分布
            this.deliveredList = v.data;
          })

          this.$axios.get("http://localhost:8088/crm/undelivered-month"
          ).then(v=>{//已交付月度工单数分布的月份
            this.deliveredMonthList = v.data;
          })
        },
        barChartThree(){
          this.$axios.get("http://localhost:8088/crm/order-count"
          ).then(v=>{//月度工单数分布
            this.deliveredList = v.data;
          })

          this.$axios.get("http://localhost:8088/crm/order-month"
          ).then(v=>{//月度工单数分布的月份
            this.deliveredMonthList = v.data;
          })
        },
        changeBarChart(){
          this.deliveredList = [];
          this.deliveredMonthList = [];
          if(this.barSelect == 1){
            this.barChartThree();
          }else if(this.barSelect == 2){
            this.barChartOne();
          }else if(this.barSelect == 3){
            this.barChartTwo();
          }
        },
        barChart(){
          let myChart = this.$echarts.init(this.$refs.barCharts);//显示
          myChart.setOption({
            color: ['#3b9ffc'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '30',
              right: '30',
              bottom: '20',
              containLabel: true
            },
            toolbox: {
              show: true,
              orient: 'vertical',
              left: 'right',
              top: 'center',
            },
            calculable: true,
            xAxis: {
              splitLine: {
                show: false
              }, //去除网格线
              splitArea: {
                show: false
              }, //保留网格区域
              axisLine: {
                show: true,
                lineStyle: { //轴上的线样式
                  color: '#808492',
                  width: 0.6, //这里是为了突出显示加上的
                },
              },
              axisTick: {
                show: true
              },
              axisLabel: { //轴上的数据样式
                color: '#808492',
              },
              data: this.deliveredMonthList,
            },
            yAxis: {
              show: true,
              type: 'value',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false,
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(33,148,246,0.2)'
                }
              },
              axisLabel: {
                textStyle: {
                  fontSize: 12,
                  color: '#808492'
                }
              }
            },
            series: [{
              type: 'bar',
              barWidth: 15, // 柱形的宽度
              barGap: 0,
              data: this.deliveredList,
            },
              {
                type: 'line',
                data: this.deliveredList,
                symbol: 'none',
                symbolSize: '10',
                name: '总计',
                lineStyle: {
                  //折线样式
                  color: "#ffc83b"
                },
              }
            ]
          })
        },
        funnelChartOne(){
          this.$axios.get("http://localhost:8088/crm/funnel-state"
          ).then(v=>{//月度工单数分布的月份
            this.funnerList = v.data;
          })
        },
        funnelChart(){//漏斗
          let myChart = this.$echarts.init(this.$refs.funnelCharts);
          myChart. setOption ({
            color: ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF', '#9FE6B8'],
            tooltip: {
              trigger: 'item',
              formatter: "{b} : {c}"
            },
            legend: {
              data: this.stageList
            },
            series: [
              {
                name: '（整体）',
                type: 'funnel',
                left: '5%',
                width: '75%',
                label: {
                  normal: {
                    formatter: '{b}: {c}'
                  },
                  emphasis: {
                    position: 'inside',
                    formatter: '{b}: {c}'
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    opacity: 0.7
                  }
                },
                data: this.funnerList
              }]
          })
        },
        look(tainId){
          this.$router.push({
            path:'/order',
            query:{
              tainId:tainId
            }
          })
        }
      },
      mounted () {
        setTimeout(()=>{this.pieChart()},500);
        setTimeout(()=>{this.barChart()},500);
        setTimeout(()=>{this.funnelChart()},500);
      },
      watch: {
        nameList(valArr) {//动态列
          var arr = this.selectList.filter(i => valArr.indexOf(i) < 0); // 未选中
          this.selectData.filter(i => {
            if (arr.indexOf(i.title) != -1) {
              i.istrue = false;
              this.$nextTick(() => {
                this.$refs.multipleTable.doLayout();
              });
            } else {
              i.istrue = true;
              this.$nextTick(() => {
                this.$refs.multipleTable.doLayout();
              });
            }
          });
        },
        repairMonthList(val) {
          this.pieChart();
        },
        deliveredMonthList(val){
          this.barChart();
        },
        deliveredList(val){
          this.barChart();
        },
        funnerList(val){
          this.funnelChart();
        }
      },
      filters: {
        formatData: function (state) {
          if (state != null && state != "") {
            if(state == 1){
              return "执行中"
            }
            if(state == 2){
              return "结束"
            }
            if(state == 3){
              return "意外终止"
            }
          } else {
            return "";
          }
        },
        formatState: function (state) {
          if (state != null && state != "") {
            if(state == 1){
              return "在保"
            }
            if(state == 2){
              return "出保"
            }
          } else {
            return "";
          }
        },
        formatDate(time){
          let date   = new Date(time)//把定义的时间赋值进来进行下面的转换
          let year   = date.getFullYear();
          let month  = date.getMonth()+1;
          let day    = date.getDate();
          let hour   = date.getHours();
          let minute = date.getMinutes();
          let second = date.getSeconds();
          return year+"-"+month+"-"+day;
          /*return year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;*/
        }
      }
    }
</script>

<style scoped>
  .header{
    border: 0px solid white;
    width: 100%;
    height: 60px;
    margin-bottom: 10px;
    background: white;
  }
  .limit{
    margin-top:5px;
    margin-left:340px;
    margin-top: 5px;
  }
  .border_width{
    width: 92%;
    height:430px;
    margin-top: 10px;
  }
</style>
